<script setup>
import {watch, ref, reactive, watchEffect} from "vue";

const userName = ref('')

const obj = reactive({ count: 0 })

watch(userName,(newVal,oldVal)=>{
  console.log('newVal = ' +newVal)
  console.log('oldVal = ' +oldVal)
})

watch(obj, (newVal, oldVal) => {
  console.log('newVal = ' +newVal.count)
  console.log('oldVal = ' +oldVal.count)
})

obj.count++

watchEffect(() => { //上来就输出:使用场景应该也不少的 比如当我们数据变化的时候 可以重新调用接口
  console.log('userName watchEffect:'+userName.value) //userName.value 才是响应式的 变化才会重新调用watchEffect
})

</script>

<template>
  <h4>watch 侦听器</h4>
  <h4>计算属性其实也属于监听的一种</h4>
  <h4>watch 侦听器可以监听属性值前后的变化</h4>

  用户名:<input type="text" v-model="userName">

</template>
